<template>
	<div>
		<div class="mod-config" style="width: 40%; float: left;">
			<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
				<el-form-item><el-input v-model="dataForm.key" placeholder="分类名称/编号" clearable></el-input></el-form-item>
				<el-form-item>
					<el-button @click="getDataList()">查询</el-button>
					<el-button v-if="isAuth('store:tstorefoodtype:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
					<!-- <el-button v-if="isAuth('store:tstorefoodtype:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
				</el-form-item>
			</el-form>
			<el-table :highlight-current-row="true" :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" @row-click="queryFoodsByTypeId" style="width: 100%;">
				<!-- <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column> -->
				<el-table-column prop="classificationName" header-align="center" align="center" label="分类名称"></el-table-column>
				<el-table-column prop="classificationNo" header-align="center" align="center" label="分类编号"></el-table-column>
				<!-- <el-table-column prop="discountStatus" header-align="center" align="center" label="是否能使用折扣">
					<template slot-scope="scope">
						<el-tag type="success" v-show="scope.row.discountStatus === 1">是</el-tag>
						<el-tag type="danger" v-show="scope.row.discountStatus === 2">否</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column prop="status" header-align="center" align="center" label="状态">
					<template slot-scope="scope">
						<el-tag type="success" v-show="scope.row.status === 1">正常</el-tag>
						<el-tag type="danger" v-show="scope.row.status === 2">停用</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column
        prop="businessCommission"
        header-align="center"
        align="center"
        label="业务提成">
      </el-table-column> -->
				<el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
				<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
					<template slot-scope="scope">
<!--						<el-button type="text" size="small" @click="useRange(scope.row)">使用范围</el-button>-->
						<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
						<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
				:current-page="pageIndex"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="pageSize"
				:total="totalPage"
				layout="total, sizes, prev, pager, next, jumper"
			></el-pagination>
		</div>
		<div style="float: right;width: 58%;">
			<Foods ref="QueryRef"></Foods>
		</div>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

		<el-dialog title="使用范围" :visible.sync="useRangeDialog" width="30%" center>
			<el-checkbox-group v-model="useRangeLists">
				<el-checkbox v-for="range in useRangeList" :key="range.id" :label="range.id">{{ range.orderName }}</el-checkbox>
			</el-checkbox-group>
			<span slot="footer" class="dialog-footer">
				<el-button @click="useRangeDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitUseRange">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import AddOrUpdate from './tstorefoodtype-add-or-update';
import Foods from './tstorefood.vue'
export default {
	data() {
		return {
			dataForm: {
				key: ''
			},
			useRangeList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false,
      dataList:[],
			dataListSelections: [],
			addOrUpdateVisible: false,
			useRangeDialog: false,
			useRangeLists: []
		};
	},
	components: {
		AddOrUpdate,
		Foods
	},
	activated() {
		this.getDataList();
	},
	methods: {
		queryFoodsByTypeId(row, column, event) {
			this.$nextTick(() => {
				this.$refs.QueryRef.getDataList(row.id)
			})
		},

		submitUseRange() {
			this.$http({
				url: this.$http.adornUrl(`/store/tstorefoodtype/update`),
				method: 'post',
				data: this.$http.adornData({
					id: this.dataForm.id || undefined,
					useRangList: this.useRangeLists
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.useRangeDialog = false;
					this.getDataList();
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.visible = false;
							this.$emit('refreshDataList');
						}
					});
				} else {
					this.$message.error(data.msg);
				}
			});
		},

		useRange(row) {
			this.dataForm.id = row.id;
			this.$http({
				url: this.$http.adornUrl('/store/tstoreordermode/list'),
				method: 'get',
				params: this.$http.adornParams()
			}).then(({ data }) => {
				this.useRangeDialog = true;
				this.useRangeList = data.page.list;
				this.$http({
					url: this.$http.adornUrl(`/store/tstorefoodtype/info/${row.id}`),
					method: 'get',
					params: this.$http.adornParams()
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.useRangeLists = data.tStoreFoodType.useRangList;
					}
				});
			});
		},

		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
			this.$http({
				url: this.$http.adornUrl('/store/tstorefoodtype/list'),
				method: 'get',
				params: this.$http.adornParams({
					page: this.pageIndex,
					limit: this.pageSize,
					key: this.dataForm.key
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.page.list;
					this.totalPage = data.page.totalCount;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
        this.dataForm.key = ''
				this.dataListLoading = false;
			});
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val;
			this.pageIndex = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.getDataList();
		},
		// 多选
		selectionChangeHandle(val) {
			this.dataListSelections = val;
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		},
		// 删除
		deleteHandle(id) {
			var ids = id
				? [id]
				: this.dataListSelections.map(item => {
						return item.id;
				  });
			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('/store/tstorefoodtype/delete'),
					method: 'post',
					data: this.$http.adornData(ids, false)
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getDataList();
							}
						});
					} else {
						this.$message.error(data.msg);
					}
				});
			});
		}
	}
};
</script>
